<template>
	<view class="management-card" :style="'background-image: url(../../static/images/common/bg' + bg + '.png);'" @click="clickCard">
		<view class="title">
			{{ title }}
		</view>
		<view class="num">
			<text>{{ num }}</text> {{ ~title.indexOf('人员') ? '人' : ~title.indexOf('车辆') ? '辆' : '' }}
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ManagementCard',
		props: {
			title: String,
			num: Number
		},
		computed: {
			bg() {
				if (~this.title.indexOf('白')) {
					return 'blue';
				} else if (~this.title.indexOf('黑')) {
					return 'black';
				} else {
					return 'orange';
				}
			}
		},
		methods: {
			clickCard() {
				this.$emit('clickCard')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.management-card {
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		height: 32px;
		padding: 0 30rpx;
		border-radius: 8rpx;
		
		color: #FFFFFF;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		.title {
			font-size: 16px;
		}
		.num {
			font-size: 14px;
			text {
				font-size: 24px;
			}
		}
	}
</style>
